<template>

  <div v-loading="loading1">
    <div>
      <el-card shadow="always" class="mianbao">
        公交线路管理
      </el-card>
      <div class="shousuo">

        <el-autocomplete
                class="inline-input"
                v-model="state1"
                :fetch-suggestions="querySearch"
                placeholder="编号"
                @select="" style="margin-right: 10px;margin-left: 20px">
          <i
                  class="el-icon-search el-input__icon"
                  slot="suffix"
                  @click="">
          </i>
        </el-autocomplete>

        <el-autocomplete
                class="inline-input"
                v-model="state1"
                :fetch-suggestions="querySearch"
                placeholder="路线名称"
                @select="" style="margin-right: 10px;margin-left: 20px">
          <i
                  class="el-icon-search el-input__icon"
                  slot="suffix"
                  @click="">
          </i>
        </el-autocomplete>
        <el-autocomplete
                class="inline-input"
                v-model="state1"
                :fetch-suggestions="querySearch"
                placeholder="时间"
                @select="" style="margin-right: 10px;margin-left: 20px">
          <i
                  class="el-icon-search el-input__icon"
                  slot="suffix"
                  @click="">
          </i>
        </el-autocomplete>

        <el-autocomplete
                class="inline-input"
                v-model="state1"
                :fetch-suggestions="querySearch"
                placeholder="票价"
                @select="" style="margin-right: 10px;margin-left: 20px">
          <i
                  class="el-icon-search el-input__icon"
                  slot="suffix"
                  @click="">
          </i>
        </el-autocomplete>

        <!--点击新增只弹出对话框-->
        <el-button type="warning" round style="margin-right: 5px;margin-left: 60px" icon="el-icon-plus"
                   @click="insertRoute()">新增
        </el-button>
        <el-button type="danger" round style="margin-right: 5px;" icon="el-icon-delete"
                   @click="deleteSelectRoute()">删除
        </el-button>
      </div>

      <el-table :data="tableData"
                v-loading="hhhh"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                border
                style="width: 100%;margin-top: 20px"
                stripe
                :header-cell-style="tableHeaderColor"
                @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55"
        >
        </el-table-column>

        <el-table-column
                prop="id"
                label="路线编号"
                width="100"
        >
        </el-table-column>
        <el-table-column
                prop="routeName"
                label="路线名称"
                align="center"
                width="150">
        </el-table-column>
        <el-table-column
                prop="beginTime"
                label="首班车时间"
                align="center"
                width="150">
        </el-table-column>
        <el-table-column
                prop="endTime"
                label="末班车时间"
                align="center"
                width="150"
        >
        </el-table-column>
        <el-table-column
                prop="betweenNum"
                label="发车间隔/分钟"
                align="center"
                width="150"
        >
        </el-table-column>
        <el-table-column
                prop="price"
                label="票价/元"
                align="center"
                width="100"
        >
        </el-table-column>
        <el-table-column
                label="操作" :formatter="formatter">
          <template slot-scope="scope">
            <el-button type="primary" round @click="information(scope.row)">详情</el-button>
            <el-button type="success" round @click="updateRoute(scope.row.id)">修改</el-button>
            <el-button type="danger" round @click="deleteRoute(scope.row.id)">删除</el-button>
            <el-button round @click="selectRoute(scope.row.id)" type="info">查看调度表</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="urlparam.num"
            :page-sizes="[15, 30, 60, 120]"
            :page-size="urlparam.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tabletotal">
    </el-pagination>

    <!--站点详情对话框信息-->
    <el-dialog
            :visible.sync="dialogDetailVisible"
            width="75%"
    >
      <div>
        <div class="outside" :style="{'--zhandianwide':zhandianwide+'px'}">
          <h3>站点线路图</h3>
          <div class="inside">
            <div class="xinxi">
              <div class="head1"
                   style="text-align: center;font-size: 14px;font-weight: bold;border-right: 1px rgb(147, 205, 187) solid;width: 45px;height: 43px;background-color: rgb(155, 231, 208);margin: 0;float: left">
                开往<br>→
              </div>
              <div class="head2"
                   style="text-align: center;width: auto;line-height: 42px;font-size: 16px;font-weight: bold;margin: 0;background-color: rgb(155, 231, 208);height: 43px;">
                {{ this.routeInfo.routeName }}
              </div>
              <div class="body1" style="background-color: rgb(31, 155, 163); height: 100%">
                <div
                        style="margin-left: 3px;line-height: 60px;font-size: 28px;font-weight: bold;color: rgb(247, 251, 249);">
                  {{ this.routeInfo.id }}路
                </div>
                <div
                        style="margin-left: 3px;line-height: 15px;letter-spacing:2px;font-size: 15px;font-weight: bold;color: rgb(247, 251, 249);">
                  首班 {{ this.routeInfo.beginTime }} 末班 {{ this.routeInfo.endTime }}
                </div>
                <div
                        style="margin-left: 3px;line-height: 35px;letter-spacing:1px;font-size: 15px;font-weight: bold;color: rgb(247, 251, 249);">
                  间隔： 不大于{{ this.routeInfo.betweenNum }}分钟一班
                </div>
                <div
                        style="margin-left: 3px;line-height: 15px;letter-spacing:1px;font-size: 15px;font-weight: bold;color: rgb(247, 251, 249);">
                  票价： {{ this.routeInfo.price }}元
                </div>

              </div>
            </div>
            <div class="zhandian">
              <el-table
                      stripe
                      class="t"
                      element-loading-text="拼命加载中"
                      element-loading-spinner="el-icon-loading"
                      element-loading-background="rgba(0, 0, 0, 0.8)"
                      :data="AllData"
                      border
                      style="width: 100%;border-top: 4px rgb(54, 166, 173) solid">

                <el-table-column
                        align="center"
                        width="44px"
                        v-for="(item,index) in allList"
                        :prop="item.key"
                        :key="index"
                        :label="item.siteOrder">
                </el-table-column>

              </el-table>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogDetailVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogDetailVisible = false">确 定</el-button>
  </span>
    </el-dialog>
    <!--站点详情对话框信息-->

    <!--添加路线对话框信息-->
    <el-dialog title="新增线路" :visible.sync="dialogInsertRoute" width="550px">
      <el-form :model="insertForm" ref="routeInfo"
               element-loading-background="rgba(0, 0, 0, 0.8)">

        <el-form-item label="路线编号" :label-width="formLabelWidth">
          <el-input v-model="insertForm.id" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="线路名称" :label-width="formLabelWidth">
          <el-input v-model="insertForm.routeName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="首发时间" :label-width="formLabelWidth">
          <el-time-picker
                  v-model="insertForm.beginTime"
                  placeholder="选择时间"
                  format="HH:mm"
                  value-format="HH:mm">
          </el-time-picker>
        </el-form-item>

        <el-form-item label="末班时间" :label-width="formLabelWidth">
          <el-time-picker
                  placeholder="选择时间"
                  v-model="insertForm.endTime"
                  format="HH:mm"
                  value-format="HH:mm">
          </el-time-picker>
        </el-form-item>

        <el-form-item label="发车间隔/分" :label-width="formLabelWidth">
          <el-input v-model="insertForm.betweenNum" style="width: 150px" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="票价/元" :label-width="formLabelWidth">
          <el-input v-model="insertForm.price" style="width: 150px" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogInsertRoute = false">取 消</el-button>
        <el-button type="primary" @click="insertRouteSubmit()">确 定</el-button>
      </div>
    </el-dialog>
    <!--添加路线对话框信息-->

    <!--修改路线对话框信息-->
    <el-dialog title="修改路线信息" :visible.sync="dialogUpdateRoute" width="550px">
      <el-form :model="routeForm" v-loading="loading"
               element-loading-text="拼命加载中"
               element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(0, 0, 0, 0.8)">

        <el-form-item label="路线编号" :label-width="formLabelWidth">
          <el-input v-model="routeForm.id" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="线路名称" :label-width="formLabelWidth">
          <el-input v-model="routeForm.routeName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="首发时间" :label-width="formLabelWidth">
          <el-time-picker
                  v-model="routeForm.beginTime"
                  placeholder="选择时间"
                  format="HH:mm"
                  value-format="HH:mm">
          </el-time-picker>
        </el-form-item>

        <el-form-item label="末班时间" :label-width="formLabelWidth">
          <el-time-picker
                  placeholder="选择时间"
                  v-model="routeForm.endTime"
                  format="HH:mm"
                  value-format="HH:mm">
          </el-time-picker>
        </el-form-item>

        <el-form-item label="发车间隔/分" :label-width="formLabelWidth">
          <el-input v-model="routeForm.betweenNum" style="width: 150px" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="票价/元" :label-width="formLabelWidth">
          <el-input v-model="routeForm.price" style="width: 150px" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateRoute = false">取 消</el-button>
        <el-button type="primary" @click="updateRouteSubmit(routeForm.id)">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改路线对话框信息-->


<!--    生成调度表对话框-->
    <el-dialog title="智能调度" :visible.sync="dialogTableVisible">
<!--      <el-table :data="gridData">-->
<!--        <el-table-column :property="gridData[0]" label="日期" width="150"></el-table-column>-->
<!--        <el-table-column property="name" label="姓名" width="200"></el-table-column>-->
<!--        <el-table-column property="address" label="地址"></el-table-column>-->
<!--      </el-table>-->
      <el-table :data="gridData" size="small" stripe
                style="margin-bottom: 20px;">
        <el-table-column align="center" label="调度表">
          <el-table-column align="center" fixed="left" label="时间段">
            <template slot-scope="{ row, $index }">
              {{$index+5}}:00 ~ {{$index+5+1}}:00
            </template>
          </el-table-column>
          <el-table-column align="center" label="发车时段">
            <template slot-scope="{ row, $index }">
              {{ row.length > 0 ? row.join(',') : '暂无数据' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="发车次数">
            <template slot-scope="{ row, $index }">
              {{ row.length > 0 ? row.length : 0 }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </el-dialog>


  </div>

</template>

<script>
  export default {
    name: "routeInformation",
    data() {
      return {
        gridData: [],
        dialogTableVisible: false,
        loading1:false,
        formLabelWidth: '130px',
        tableData: [],
        tabletotal: 0,
        loading: true,
        hhhh: true,
        dialogInsertRoute: false,
        dialogUpdateRoute: false,
        urlparam: {
          num: 1,
          size: 15
        },
        routeInfo: {
          id:'',
          routeName: '',
          beginTime: '',
          endTime: '',
          betweenNum: 0,
          price: 0,
        },
        insertForm: {
          id:'',
          routeName: '',
          beginTime: '',
          endTime: '',
          betweenNum: '',
          price: '',
        },
        routeForm: {
          id: 0,
          routeName: '',
          beginTime: '',
          endTime: '',
          betweenNum: 0,
          price: 0,
        },
        zhandianwide: 0,
        AllData: [],
        allList: [],
        getData: [],
        dialogDetailVisible: false,
        oldId:0,
      }
    },
    created() {
      this.getAll();
    },
    methods: {
      getAll() {
        this.$http({
          url: '/route/getAll',
          method: 'GET',
          params: this.urlparam
        }).then(result => {
          console.log(result);
          if (result.status == 200) {
            this.tableData = result.data.list;
            this.hhhh = false;
            this.tabletotal = result.data.total;

          } else {
            this.$message({
              showClose: true,
              message: '发生了未知错误',
              type: 'error'
            })
          }

        })

      },
      setData() {
        this.$http({
          url: '/sites/getSiteById',
          method: 'GET',
          params: {
            id: this.routeInfo.id
          }
        }).then(result => {
          console.log(result);
          if (result.status == 200) {

            /*表格动态宽度*/
            if (result.data.length <= 12) {
              this.zhandianwide = 210 + 44 * result.data.length + 13
            } else {
              this.zhandianwide = 210 + 44 * 12 + 13
            }


            for (let i = 0; i < result.data.length; i++) {
              this.getData.push(result.data[i]);
            }
            console.log(this.getData);
            var a = {};
            var b = [];
            // a['title'] = this.getData[i].title;
            var x = 0;
            var join = 0;
            for (var i in this.getData) {
              x += 1;
              b.push({siteOrder: "" + this.getData[i].siteOrder, key: 'siteName' + x});
              a['siteName' + x] = this.getData[i].siteName;

            }
            this.AllData.push(a);
            this.allList = b;
            console.log(this.allList);
          } else {
            this.$message({
              showClose: true,
              message: '发生了未知错误',
              type: 'error'
            })
          }
        });
      },
      information(data) {
        this.dialogDetailVisible = true;
        this.routeInfo.id = data.id;
        this.routeInfo.beginTime = data.beginTime;
        this.routeInfo.endTime = data.endTime;
        this.routeInfo.routeName = data.routeName;
        this.routeInfo.betweenNum = data.betweenNum;
        this.routeInfo.price = data.price;
        console.log(this.routeInfo);
        this.allList = [];
        this.AllData = [];
        this.getData = [];
        this.setData();
      },
      /*增加路线*/
      insertRoute() {
        this.dialogInsertRoute = true;
        this.insertForm.id = null,

                this.insertForm.routeName = null,
                this.insertForm.beginTime = null,
                this.insertForm.endTime = null,
                this.insertForm.betweenNum = null,
                this.insertForm.price = null
      },
      insertRouteSubmit() {
        this.dialogInsertRoute = false;
        this.$http({
          url: 'route/insertOne',
          method: 'POST',
          params: {
            id:this.insertForm.id,
            routeName: this.insertForm.routeName,
            beginTime: this.insertForm.beginTime,
            endTime: this.insertForm.endTime,
            betweenNum: this.insertForm.betweenNum,
            price: this.insertForm.price,
          }

        }).then(result => {
          /*
          返回1（添加成功）
          返回-1（已有该线路）
          返回0（添加失败，未填写线路编号或其他原因）
          */
          console.log(result);
          if (result.data > 0) {
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success'
            })

            this.getAll()

          } else if (result.data == -1) {
            this.$notify({
              title: '失败',
              message: '已存在该线路',
              type: 'error'
            })
            this.getAll()

          } else {
            this.$notify({
              title: '失败',
              message: '编号为空',
              type: 'error'
            })
            this.getAll()
          }
        })
      },
      formatter(row, column) {
        return row.address;
      },
      /*查看线路调度*/
      selectRoute(id){

        console.log(id);
        this.loading1=true;
        this.$http({
          url:'/schedule/info/'+id+'/run',
          method:'post'
        }).then(result=>{
          console.log(result);
          if(result.status==200){
            this.loading1=false;
            this.gridData=result.data
            this.dialogTableVisible=true;
          }
        })
      },
      // 删除线路
      deleteRoute(id) {
        this.$http({
          url: '/route/deleteOne',
          method: 'delete',
          params: {
            id: id
          }
        }).then(result => {
          if (result.status == 200) {
            this.$message({
              showClose: true,
              message: '删除信息成功',
              type: 'success'
            });
            this.getAll();
          }
          console.log(result);
        })
      },
      deleteSelectRoute() {
        this.$confirm('此操作将永久删除[' + this.multipleSelection.length + ']条信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ids = '?';
          this.multipleSelection.forEach(item => {
            ids += 'list=' + item.id + '&';
          });
          this.deleteRequest('/route/deleteAll' + ids).then(resp => {
            console.log(resp)
            if (resp.data > 0) {
              this.getAll();
              this.$notify({
                title: '成功',
                message: '批量删除成功',
                type: 'success'
              });
            } else {
              this.$notify({
                title: '失败',
                message: '删除失败',
                type: 'error'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      /*获取修改前线路表单信息*/
      updateRoute(id) {
        this.dialogUpdateRoute = true;
        this.loading = true;
        this.$http({
          url: '/route/getOneById',
          method: 'GET',
          params: {
            id: id
          }
        }).then(result => {
          console.log(result)
          if (result.status == 200) {
            this.oldId=result.data.id;
            this.routeForm.id = result.data.id;
            this.routeForm.routeName = result.data.routeName;
            this.routeForm.beginTime = result.data.beginTime;
            this.routeForm.endTime = result.data.endTime;
            this.routeForm.betweenNum = result.data.betweenNum;
            this.routeForm.price = result.data.price;
            this.timer = setTimeout(() => {   //设置延迟执行
              this.loading = false
            }, 200);
          }
        })
      },
      /*提交线路表单信息*/
      updateRouteSubmit(id) {
        this.dialogUpdateRoute = false;
        this.$http({
          url: '/route/updateRouteSubmit',
          method: 'put',
          data: {
            id: parseInt(this.routeForm.id),
            routeName: this.routeForm.routeName,
            beginTime: this.routeForm.beginTime,
            endTime: this.routeForm.endTime,
            betweenNum: parseInt(this.routeForm.betweenNum),
            price: parseInt(this.routeForm.price),
            oldId:this.oldId
          }

        }).then(result => {
          console.log(result);
          if (result.data > 0) {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success'
            })
            this.getAll()

          } else {
            this.$notify({
              title: '失败',
              message: '未知错误',
              type: 'error'
            });
          }
        })
      },
      tableHeaderColor({rowIndex}) {
        if (rowIndex === 0) {
          return 'background-color: lightblue;color: #fff;font-weight: 500;height:51px'
        }
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
        let va = [];
        this.multipleSelection.map(item => {
          va.push(item.id)
        })
        console.log(va);
        this.list = va;
      },
      handleSizeChange(val) {
        this.urlparam.size = val;
        if (this.order == null) {
          this.getAll();
        } else if (this.order == 'descending') {
          console.log(val);
          this.getDec();
        } else if (this.order == 'ascending') {
          this.getAsc();
        }

      },
      handleCurrentChange(val) {
        this.urlparam.num = val;
        if (this.order == null) {
          this.getAll();
        } else if (this.order == 'descending') {
          console.log(val);
          this.getDec();
        } else if (this.order == 'ascending') {
          this.getAsc();
        }

      },
    }
  }
</script>

<style scoped>
  .mianbao {
    text-align: center;
  }

  h3 {
    text-align: center;
    margin: 10px;
    color: rgb(27, 155, 163);
    font-size: 24px;
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    letter-spacing: 2.5px;
  }

  .outside {
    margin: 10px auto;
    width: var(--zhandianwide);
    position: center;
  }

  .inside {
    height: 157px;
  }

  .t {
    border: rgb(195, 227, 232) 1px solid;
    width: 20px;

  }

  .xinxi {
    float: left;
    width: 210px;
    height: 100%;

  }

  .zhandian {


    display: flex;
    margin: 10px;
  }

  .shousuo {
    margin: 10px;
  }
</style>
